// src/views/user/AdminList.tsx
import { Table, Space, Button, Popconfirm, Modal, Form, Input, Select, Tree } from 'antd'
import { useEffect, useMemo, useState } from 'react'
import type { ColumnsType } from 'antd/es/table'
import {
  EditOutlined,
  DeleteOutlined
} from '@ant-design/icons'

import { getAdminList, removeAdmin, addAdmin, IAdminParams,updateAdmin } from '../../api/admin'
// 导入 menus 菜单路由对应的基础数据
import menus, { IMenuProps } from '../../router/menu'
import { type } from 'node:os'
import { TableRowSelection } from 'antd/es/table/interface'
import { useAppSelector } from '../../store/hooks'
// 获取 Tree 组件树形结构的数据 +++++
interface ITreeData {
  key: string
  title: string
  children?: ITreeData[]
}
// 在 组件外部定义的函数，如果使用了 import 调用的外围数据，直接调用该函数，会导出程序异常
function getTreeData(menus: IMenuProps[]) {
  let arr: ITreeData[] = []
  menus.forEach(item => {
    let obj: ITreeData = {
      key: '',
      title: ''
    }
    if (item.children) {
      obj = {
        key: item.keyid,
        title: item.label,
        children: getTreeData(item.children)
      }
    } else {
      obj = {
        key: item.keyid,
        title: item.label,
      }
    }
    arr.push(obj)
  })
  return arr
}
// 切记：在 RFC 组件外部导入数据，外部定义方法，外部方法调用外部数据，webpack 解析报错
// function test(menus: any){
//   console.log("你好！", menus);
// }
// test(menus)


type AdminListProps = {}
interface DataType {
  adminid: string;
  adminname: number;
  password: string;
  role: number;
  checkedKeys: any[];
}
// 管理员列表 页面
export const AdminList = (props: AdminListProps) => {
  // 管理员列表 数据
  const [adminList, setAdminList] = useState([])

  // 表格分页的相关数据
  const [current, setCurrent] = useState(1) // 页码
  const [pageSize, setPageSize] = useState(5) // 每页显示个数

  // 添加管理员的弹窗控制
  const [addAdminVisible, setAddAdminVisible] = useState(false)
  const [type, setType] = useState('add')

  // 在组件内部调用 外部声明的方法，得到 树形控件 的数据 +++++
  const treeData = getTreeData(menus)
  const [checkedKeys, setCheckedKeys] = useState(['0-0'])
  // 重置表单，可以直接拿到 form 对象进行操作
  const [form] = Form.useForm()
  const onAdd = async (values: any) => {
    values.checkedKeys = checkedKeys
    await addAdmin(values)
    // 模态框消失， 重置表单，重置权限
    setAddAdminVisible(false) // 模态框消失
    form.setFieldsValue({ // 重置表单
      adminname: '', password: '', role: 1
    })
    setCheckedKeys(['0-0']) // 重置权限
    getAdminData() // 请求新的数据

  }

//   更新页面数据
  const onUpdate = async (values:IAdminParams)=>{
    values.checkedKeys = checkedKeys
    await updateAdmin(values)
    form.setFieldsValue({
        adminname:'',password:'',role:1
    })
    setCheckedKeys(['0-0'])
    setAddAdminVisible(false)
    getAdminData()
  }

  // 获取管理员列表数据
  const getAdminData = async () => {
    let res = await getAdminList()
    setAdminList(res.data.data)
  }

  // 表格设置规范
  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      align: 'center',
      render: (text, record, index) => {
        // 设置了分页后，展示的序号需要根据页码进行计算 +++
        return <span>{(current - 1) * pageSize + index + 1}</span>
      }
    },
    {
      title: '账户',
      align: 'center',
      dataIndex: 'adminname'
    },
    {
      title: '角色',
      align: 'center',
      dataIndex: 'role',
      render: text => {
        return text === 2 ? '超级管理员' : '管理员'
      }
    },
    {
      title: '操作',
      align: 'center',
      render: (text, record, index) => {
        return (
          <Space >
            <Button type="primary" shape="circle" icon={<EditOutlined />} onClick={
                ()=>{
                    setType('update')
                    // 打开弹窗
                    setAddAdminVisible(true)
                    // 设置用户名和权限
                    form.setFieldsValue({
                    adminname: record.adminname,
                    role: record.role
                    })
                    // 设置权限树形结构
                    setCheckedKeys(record.checkedKeys)
                }
            }/>
            {/* 删除当前管理员操作相关逻辑，需要进行确认操作 ++++ */}
            <Popconfirm
              title="确定删除吗?"
              onConfirm={async () => {
                console.log("删除当前对应的管理员", record);
                await removeAdmin({
                  adminid: record.adminid
                })
                getAdminData()
              }}
              onCancel={() => { }}
              okText="确定"
              cancelText="再想想"
            >
              <Button danger shape="circle" icon={<DeleteOutlined />} />
            </Popconfirm>
          </Space>
        )
      }
    }
  ]

  // 初始化 发出数据请求 mounted，在 副作用里面，不允许使用 async
  useEffect(() => {
    getAdminData()
  }, [])

 // 批量删除数据相关
 const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 选中需要删除的数据
 const onSelectChange = (newSelectedRowKeys: any) => { // 点击选中时的数据事件
    setSelectedRowKeys(newSelectedRowKeys)
}
const rowSelection: TableRowSelection<DataType> = { // 最左侧选择框选项配置的参数
    selectedRowKeys,
    onChange: onSelectChange
  };
  // 拿到当前用户的 权限，对页面中具体的 按钮级别的权限控制   ++++
  const role = useAppSelector(state => state.user.role)

  // 只要是选择了任意一条数据，同时需要是超级管理员，可以进行批量删除  +++
  const showDeleteMoreBtn = useMemo(() => {
    return selectedRowKeys.length > 0 && role > 1
  }, [selectedRowKeys, role])

  return (
    <Space direction='vertical' style={{ width: '100%' }}>
        <div style={{ display: 'flex' }}>
            <Button type="primary" onClick={() => setAddAdminVisible(true)}>添加管理员</Button>
            {/* 批量删除的按钮，这个按钮只有在选择了元素，并且超级管理员才能看到 */}
            {
                showDeleteMoreBtn ? <Button type="primary" style={{ marginLeft: 20 }} onClick={
                    () => {
                    // 一次性删除多条数据，需要保证所有的数据都删除完成之后再进行操作 Promise.all
                    const removeArr: any = []
                    selectedRowKeys.forEach(item => {
                        removeArr.push(removeAdmin({ adminid: item }))
                    })
                    Promise.all(removeArr).then((res) => {
                        console.log('result', res)
                        getAdminData()
                    })
                    }
                }>批量删除</Button> : null
            }
        </div>
      {/* 分页相关的设置  rowSelection={rowSelection} 给table增加可以删除的选择框*/}
      {
        role < 2 ?
        <Table
          dataSource={adminList}
          columns={columns}
          bordered
          scroll={{ y: document.body.offsetHeight - 330 }}
          rowKey='adminid'
          pagination={{
            position: ['bottomRight'],
            current,
            pageSize,
            onChange: (page, pageSize) => {
              setCurrent(page)
              setPageSize(pageSize)
            },
            showTotal: (total) => {
              return <span>共有{total}条数据</span>
            },
            showQuickJumper: true,
            pageSizeOptions: [5, 10, 20, 50]
          }}
        />:
      <Table
        dataSource={adminList}
        columns={columns}
        bordered
        scroll={{ y: document.body.offsetHeight - 330 }}
        rowKey='adminid'
        rowSelection={rowSelection}
        pagination={{
          position: ['bottomRight'],
          current,
          pageSize,
          onChange: (page, pageSize) => {
            setCurrent(page)
            setPageSize(pageSize)
          },
          showTotal: (total) => {
            return <span>共有{total}条数据</span>
          },
          showQuickJumper: true,
          pageSizeOptions: [5, 10, 20, 50]
        }}
      />
      }
      {/* 添加管理员的弹窗 */}
      <Modal
        title="添加管理员"
        open={addAdminVisible}
        footer={null}
        onCancel={() => setAddAdminVisible(false)}
      >
        {/* 初始化管理员权限是 1 */}
        <Form name="dynamic-rule" onFinish={type==="add"?onAdd:onUpdate} initialValues={{
          role: 1
        }} form={form}>
          <Form.Item
            name="adminname"
            label="管理员账户"
            rules={[
              {
                required: true,
                message: '请输入管理员账户',
              },
            ]}
          >
             {/* 修改当前用户，不允许修改用户名，主要目的是重设 密码 or 权限 */}
             <Input placeholder="管理员账户" disabled={type === 'update'} />
          </Form.Item>
          {/* 密码就直接使用原始的输入框，如果在修改状态下可以允许不输入，不输入代表代码不修改 */}
          {
            type === "add" ?
            <Form.Item
                name="password"
                label="管理员密码"
                rules={[
                {
                    required: true,
                    message: '请输入管理员初始密码',
                },
                ]}
            >
                <Input type="password" placeholder="密码" />
            </Form.Item> :
            <Form.Item
                name="password"
                label="管理员密码"
            >
                <Input type="password" placeholder="留空代表不修改！" />
            </Form.Item>
          }
          
          <Form.Item
            name="role"
            label="管理员角色"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Select >
              <Select.Option value={1}>管理员</Select.Option>
              <Select.Option value={2}>超级管理员</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item
            name="checkedKeys"
            label="管理员权限"
          >
            <Tree
              checkable
              defaultExpandAll
              checkedKeys={checkedKeys}
              treeData={treeData}
              onCheck={(checkedKeys: any) => { setCheckedKeys(checkedKeys) }}
            />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              {type === "add" ? "确认添加": '确认更新'}
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </Space>
  );
}